<template>
  <view class="change-wechat">

    <!-- 提示信息 -->
    <view class="tip top">
      每个自然月可修改1次，您还可以修改1次
    </view>

    <!-- 微信号输入 -->
    <view class="input-section">
      <input class="wechat-input" type="text" v-model="newWechat" placeholder="请输入微信号" />
    </view>

    <!-- 当前微信号 -->
    <view class="current-wechat">
      <text>当前微信号：130*****00</text>
    </view>

    <!-- 提示信息 -->
    <view class="tip">
		<image src="/static/img/Warning.svg" class="warn"></image>
       若需要修改登录微信，请前往设置，账号安全中心--账号管理
    </view>

    <!-- 确定按钮 -->
    <view class="confirm-button" @click="confirmChange">
      <text>确定</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newWechat: "", // 新微信号
    };
  },
  methods: {
    // 确认修改微信号
    confirmChange() {
      if (!this.newWechat) {
        uni.showToast({
          title: "请输入微信号",
          icon: "none",
        });
        return;
      }

      // 模拟修改成功
      uni.showToast({
        title: "修改成功",
        icon: "success",
      });

      // 这里可以添加修改逻辑，例如调用 API 修改微信号
    },
  },
};
</script>

<style scoped>
.change-wechat {
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

.tip {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}

.top{
	width: 100%;
	height: 36px;
	line-height: 36px;
	background: #FFE2D8;
	color: #FF6029;
}

.warn{
	width: 12px;
height: 12px;
}

.input-section {
  margin-bottom: 20px;
}

.wechat-input {
  width: 100%;
  height: 40px;
  font-size: 16px;
  color: #333;
  border-bottom: 1px solid #ebebeb;
}

.current-wechat {
  font-size: 16px;
  color: #333;
  margin-bottom: 20px;
}

.confirm-button {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
	border-radius: 32px;
	font-size: 32rpx;
	color: #fff;
	text-align: center;
	cursor: pointer;
}

.confirm-button text {
  font-size: 16px;
  color: #fff;
}
</style>